import React, { Component } from 'react'

import { ChangeBorder } from '../../home/ui/styled'

import {
    NavLink
} from 'react-router-dom'

import {
    Wrap,
    Header,
    Hot,
} from './styled'

import Waterfall from './Waterfall'

const index = (props) => {
    return (
        <Wrap>
            <Header>
                <div className="logo">
                    <img src="" alt=""/>
                </div>
                <div className="nav">
                    <NavLink to='/home'>
                        <ChangeBorder 
                            color={props.history.location.pathname === '/home' ? '#cc3333' : '#fff'}
                            width='0 0 3px 0'
                        >首页</ChangeBorder>
                    </NavLink>
                    <NavLink to='/community'>
                        <ChangeBorder 
                            color={props.history.location.pathname === '/community' ? '#cc3333' : '#fff'}
                            width='0 0 3px 0'
                        >社区</ChangeBorder>
                    </NavLink>
                </div>
            </Header>
            <Hot>
                <div className="title">
                    <i>热门活动</i>
                    <NavLink exact to='/communityhot'>
                        <span>查看更多</span>
                    </NavLink>
                </div>
                <div className="banner"></div>
            </Hot>
            <Waterfall shops={props.shops}></Waterfall>
        </Wrap>
    )
}
export default index
